<!--  -->
<template>
    <div class='homePage'>
        <div class="left_box">
            <div class="left_top">
                <div style="display: flex;margin-bottom: 20px;">
                    <div>
                        <img style="margin-right: 8px;" height="45" width="45" src="../assets/user_img.png" alt="">
                    </div>
                    <div>
                        <p>江西水利职业学院</p>
                        <p>管理员|信息工程系-计算机应用技术</p>
                    </div>
                </div>
                <div class="statistics">
                    <div>
                        <p>组织总人数</p>
                        <p>44</p>
                    </div>
                    <div>
                        <p>在校人员</p>
                        <p>35</p>
                    </div>
                    <div>
                        <p>就业人员</p>
                        <p>0</p>
                    </div>
                    <div>
                        <p>本月请假人次</p>
                        <p>20</p>
                    </div>
                </div>
            </div>
            <div class="quick_access">
                <p>快捷入口</p>
                <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                    <div class="center">
                        <div>
                            <i class="iconfont icon-shenpi icon_bg"></i>
                        </div>
                        <span>假期审批</span>
                    </div>
                    <div class="center">
                        <div>
                            <i class="iconfont icon-guanli icon_bg"></i>
                        </div>
                        <span>就业管理</span>
                    </div>
                    <div class="center">
                        <div>
                            <i class="iconfont icon-navicon-jsgl icon_bg"></i>
                        </div>
                        <span>角色管理</span>
                    </div>
                    <div class="center">
                        <div>
                            <i class="iconfont icon-ziyuan icon_bg"></i>
                        </div>
                        <span>人员添加</span>
                    </div>
                </div>
            </div>
            <div class="chart_box">
                <div class="chart_info">
                    <P>总评成绩</P>
                    <p>总人数</p>
                    <p>{{ achievement.achievementAll }}</p>
                    <div class="overall_evaluation">
                        <div>
                            <p>总评A</p>
                            <p>{{ achievement.achievementA }}</p>
                        </div>
                        <div>
                            <p>总评B</p>
                            <p>{{ achievement.achievementB }}</p>
                        </div>
                        <div>
                            <p>总评C</p>
                            <p>{{ achievement.achievementC }}</p>
                        </div>
                        <div>
                            <p>总评D</p>
                            <p>{{ achievement.achievementD }}</p>
                        </div>
                    </div>
                </div>
                <div id="chart1"></div>
            </div>
            <div class="chart_box">
                <div id="chart2">
                </div>
            </div>
        </div>
        <div class="right_box">
            <div class="right_top">
                <div class="link_box">
                    <p>帮助链接</p>
                    <div><i class="el-icon-s-management"></i>入门指南</div>
                    <div><i class="el-icon-tickets"></i>在线帮助手册</div>
                    <div><i class="el-icon-phone"></i>联系技术支持</div>
                    <div><i class="el-icon-plus"></i>添加链接</div>
                </div>
                <div class="calendar_box">
                    <el-calendar v-model="calendarValue"></el-calendar>
                </div>
            </div>
            <div class="right_bottom">
                <p>通知公告</p>
                <div class="content">
                    <div class="content_small_box">
                        <div><i class="iconfont icon-shuidi icon_location"></i></div>
                        <div class="text_box">
                            <div @click="goto('http://www.jxslsd.com/news_detail.aspx?id=20485')">张思金调研指导乡村振兴工作</div>
                            <div>2022-11-21 12:01:00</div>
                        </div>
                    </div>
                    <div class="content_small_box">
                        <div><i class="iconfont icon-shuidi icon_location"></i></div>
                        <div class="text_box">
                            <div @click="goto('http://www.jxslsd.com/news_detail.aspx?id=20523')">2024届毕业生第五期大型综合类招聘会</div>
                            <div>2022-11-21 12:01:00</div>
                        </div>
                    </div>
                    <div class="content_small_box">
                        <div><i class="iconfont icon-shuidi icon_location"></i></div>
                        <div class="text_box">
                            <div @click="goto('http://www.jxslsd.com/news_detail.aspx?id=20514')">刘孟桦组织召开“校长与企业现场洽谈会”</div>
                            <div>2022-11-21 12:01:00</div>
                        </div>
                    </div>
                    <div class="content_small_box">
                        <div><i class="iconfont icon-shuidi icon_location"></i></div>
                        <div class="text_box">
                            <div @click="goto('http://www.jxslsd.com/news_detail.aspx?id=20507')">学院纪委对后勤服务中心开展集体廉政谈话</div>
                            <div>2022-11-21 12:01:00</div>
                        </div>
                    </div>
                </div>

                </div>
            </div>
        </div>
</template>

<script>

import * as echarts from 'echarts';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            achievement: [],
            attendanceRate: [],
            calendarValue: new Date(),

        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        goto(url){
         window.open(url)
        },
        getChart(data) {
            var seriesData = [];
            if (data) {
                for (const key in data) {
                    if (data != 'achievementAll') {
                        seriesData.push({
                            value: data[key],
                            name: key
                        })

                    }
                }
            }
            var chartDom = document.getElementById('chart1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                // legend: {
                //     top: '5%',
                //     left: 'center'
                // },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: seriesData
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        getChart1(data) {
            let xData = []
            let yData = []
            data.forEach(item => {
                xData.push(item.date)
                yData.push(item.people)
            });
            var chartDom = document.getElementById('chart2');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: yData,
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 1, color: '#5f91fd' },
                                { offset: 0, color: '#fff' }
                            ])
                        },
                    }
                ]
            };

            option && myChart.setOption(option);

        },

        getAchievement() {
            this.$request.get('http://localhost:3003/achievement').then((res) => {
                console.log(res);
                const { data, status } = res;
                if (status == 200) {
                    this.achievement = data;
                    this.getChart(this.achievement)
                } else {
                    this.$message.error('暂无数据');
                    this.achievement = {};
                }
            })
        },
        getAttendanceRate() {
            this.$request.get('http://localhost:3003/attendanceRate').then((res) => {
                console.log(res);
                const { data, status } = res;
                if (status == 200) {
                    this.attendanceRate = data;
                    this.getChart1(this.attendanceRate)
                } else {
                    this.$message.error('暂无数据');
                    this.attendanceRate = {};
                }
            })
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getAchievement();
        this.getAttendanceRate();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
* {
    padding: 0;
    margin: 0;
}

.left_top {
    width: 800px;
    padding: 20px 16px;
    box-sizing: border-box;
    background-color: white;
}

.statistics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;

}

.quick_access {
    width: 800px;
    padding: 20px 16px;
    box-sizing: border-box;
    background-color: white;
    margin-top: 10px
}

.center {
    text-align: center;

    div {
        margin-bottom: 10px;

    }
}

.icon_bg {
    background-color: aqua;
    font-size: 25px;
    box-sizing: border-box;
    padding: 5px;
    color: #fff;
    border-radius: 5px;
}

#chart1 {
    width: 500px;
    height: 300px;
}

.chart_info {
    width: 300px;
    height: 300px;
    padding: 20px 16px;
    box-sizing: border-box;

    p {
        margin-bottom: 10px;
    }
}

.chart_box {
    display: flex;
    width: 800px;
    // height: 300px;
    background-color: #fff;
    margin-top: 10px;
}

.overall_evaluation {
    width: 100%;
    display: flex;
    background-color: #dadada;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
    border-radius: 5px;

    div {
        text-align: center;
        width: 45%;

    }

    div p:nth-child(2) {
        font-size: 22px;
    }


}

#chart2 {
    width: 800px;
    height: 400px;
}

.right_box {
    width: 400px;
}

.homePage {
    display: flex;
}

.right_top {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-around;

    .link_box,
    .calendar_box {
        width: 190px;
        height: 100%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
    }

    .link_box div {
        background-color: #f5f6f8;
        width: 100%;
        padding: 10px 16px;
        margin-top: 10px;
        box-sizing: border-box;

        // box-shadow: 100px;
        i {
            color: aqua;
            margin-right: 5px;
        }
    }
}

/deep/.el-calendar .el-calendar_header {
    padding: 0;
}

/deep/.el-button-group {
    display: none !important;
}

/deep/.el-calendar-table .el-calendar-day {
    padding: 0;
    height: 24px;
}

/deep/.el-calendar__body {
    padding: 0;
}

.right_bottom {
    width: 400px;
    padding: 20px;
    box-sizing: border-box;

}

.icon_location {
    padding-right: 10px;
    box-sizing: border-box;
    color: blue;
}
.content_small_box{
    border-bottom: 1px solid #dadada;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
}
.text_box{
    div{
        margin-bottom: 10px;
    }
    div:nth-child(2){
        font-size: 12px;
        color: #dadada;
    }
}
</style>